<template>
  <view>
    <!-- 个人信息 -->
    <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image :src="avatarUrl"></image>
    </button>
    <input type="nickname" placeholder="请输入昵称" />

    <!-- 获取code -->
    <button @click="getaccessToken">获取接口调用凭证code</button>

    <!-- 获取手机号 -->
    <button open-type="getRealtimePhoneNumber" @bindgetrealtimephonenumber="getrealtimephonenumber">获取手机号</button>

    <!-- 授权申请 -->
    <button @click="getLocation">地址授权申请</button>
    <map id="myMap" show-location />

    <!-- 授权设置 -->
    <button @click="openSetting">授权设置</button>

    <tn-Button type="success">按钮</tn-Button>
    <tn-icon name="search" />
    <tn-loading show animation />

    <view v-for="(item, index) in categoryList" :key="index">
      {{ item }}
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import api from '@/utils/api.js';
import { ref } from 'vue'; // 添加ref导入

onLoad((res) => {
  // console.log(res)
  // getCategoryList();
  // getBannerList();
});

// access_token
const accessToken = ref();

// 获取access_token
const getaccessToken = async () => {
  const { data } = await uni.request({
    url: 'https://api.weixin.qq.com/cgi-bin/token',
    data: {
      grant_type: 'client_credential',
      appid: 'wx27664d9363ea7258',
      secret: 'a5bcb87a7469a97a60fa103a7ec0eb72'
    }
  });
  accessToken.value = data.access_token;
  console.log('accessToken', accessToken.value);
};

// 授权申请
const sendSetting = async () => {
  // 先获取用户的授权信息列表
  const res = await wx.getSetting();
  // console.log('授权信息:', res);

  // 如果用户未授权跑步权限，发起该请求
  // if (!res.authSetting['scope.werun']) {
  //   // 发起
  //   const werun = await wx.authorize({ scope: 'scope.werun' });
  //   console.log('werun:', werun);
  // }
};

// 获取定位
const getLocation = async () => {
  // // 发起定位授权申请弹窗
  // const userLocation = await wx.authorize({ scope: 'scope.userLocation' });
  // console.log('userLocation:', userLocation);
  // 获取定位坐标经纬度
  const location = await wx.getLocation({
    type: 'wgs84'
  });
  console.log('location', location);
  if (location) {
    // 根据id创建地图组件对象
    const mapContext = await wx.createMapContext('myMap');
    // 移动位置
    const moveToLocation = await mapContext.moveToLocation({
      longitude: location.longitude,
      latitude: location.latitude
    });
    console.log('移动位置成功:', moveToLocation);
    // 移动标注
    // const translateMarker = await mapContext.translateMarker({
    //   autoRotate: true,
    //   duration: 1000,
    //   destination: {
    //     latitude: location.longitude,
    //     longitude: location.latitude
    //   }
    // });
    // console.log('移动标注成功:', translateMarker);
  }
};

// 授权设置
const openSetting = async () => {
  // 微信的授权设置接口，会跳转到本小程序申请过的授权列表
  const wxopenSettimg = await wx.openSetting();
  console.log(wxopenSettimg.authSetting);
};

// 默认头像
const avatarUrl = ref('https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0');
const onChooseAvatar = (e) => {
  avatarUrl.value = e.detail.avatarUrl;
  console.log(avatarUrl.value);
  // api.file.upload(avatarUrl.value);
};

// 获取手机号
const getrealtimephonenumber = async (e) => {
  // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
  // wx.getSetting({
  //   success(res) {
  //     if (!res.authSetting['scope.record']) {
  //       wx.authorize({
  //         scope: 'scope.record',
  //         success() {
  //           // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
  //           wx.startRecord();
  //         }
  //       });
  //     }
  //   }
  // });
  console.log('e', e);
  // console.log('e.detail.code:', e.detail.code); // 动态令牌
  // console.log('e.detail.errMsg:', e.detail.errMsg); // 回调信息（成功失败都会返回）
  // console.log('e.detail.errno:', e.detail.errno); // 错误码（失败时返回）

  // 如果code存在表示用户同意获取其手机号
  // if (e.detail.code) {
  //   // 通过 code 调用后端接口换取手机号
  //   const phoneData = await uni.request({
  //     url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${accessToken.value}`,
  //     method: 'POST',
  //     data: {
  //       code: e.detail.code
  //     }
  //   });
  //   console.log(phoneData);
  // }
};

// 分类列表
const categoryList = ref([]);
// 获取商品分类列表
const getCategoryList = async () => {
  categoryList.value = await api.pdm.categoryList();
  console.log('商品分类列表:', categoryList.value);
};

// 轮播图列表
const bannerList = ref([]);
// 获取轮播图
const getBannerList = async () => {
  bannerList.value = await api.pdm.bannerList();
  console.log('轮播图列表:', bannerList.value);
};
</script>

<style lang="scss"></style>
